<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		section{display: none;}
	</style>
</head>
<body>
	<div class="sub-nav">
		<ul>
			<li>链接一</li>
			<li>链接二</li>
			<li>链接三</li>
		</ul>
	</div>
	<div class="contents">
		<section class="con" style="display: block;">内容一</section>
		<section class="con">内容二</section>
		<section class="con">内容三</section>
	</div>
	
	
	<script type="text/javascript">
		var btns = document.querySelectorAll('li');
		var cons = document.querySelectorAll('section');
		
		for(var i = 0 ;i < btns.length; i++){
			btns[i].index=i;
			btns[i].onclick=function(){
				for(var j = 0;j<btns.length;j++){
					cons[j].style.display="none";
				}
				cons[this.index].style.display="block";
			}
		}
	</script>
</body>
</html>